<script setup>
  defineProps({
    total: {
      type: Number,
      default: 0
    },
    page: {
      type: Number,
      default: 1
    },
    size: {
      type: Number,
      default: 10
    }
  })

  defineEmits(['change'])
</script>

<template>
  <div class="page-view">
    <el-pagination hide-on-single-page small background :total="total" :current-page="page" :page-size="size" @current-change="$emit('change', $event)" layout="prev, pager, next, jumper, total" />
  </div>
</template>

<style scoped lang="scss">
  .page-view {
    .el-pagination {
      margin-top: 20px;
      justify-content: center;
    }
  }
</style>
